<template>
	<view class="load" v-if="!load">
		<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
	</view>
	<view v-else>
		<x-scroll :fixed="true" @onRefresh="onRefresh" @scrolltolower="scrolltolower" :refresh="_freshing">
			<view class="list">
				<block v-if="Array.isArray(applyList) && applylLength > 0">
				<view class="item wap"  v-for="item in applyList" :key="item.ID">
					<view class="cover" @click="previewImage(item.UserImgs)">
						<image :src="item.HeadImgUrl" mode="aspectFill" />
					</view>
					<view class="con" @click="nav_to(`/pages/user/user_visitor?id=${item.UserID}`)">
						<view class="name f1 c1">
							{{ $util.entitiesToUtf16(item.Name) || '匿名' }}
							<image v-if="item.UserType == '体验会员'" class="vipiconimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1712643203782247.png"></image>

							<image class="vipiconimg" v-if="item.UserType == '金卡会员'" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1712643257412478.png"></image>

							<image class="vipiconimg" v-if="item.UserType == '年卡会员'" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1712643305959214.png"></image>

							<image class="vipiconimg" v-if="item.UserType == '黑金卡会员'" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1712643305959214.png"></image>

							<image
								class="vipiconimg"
								v-if="item.UserType == '黑金年卡会员'"
								src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1712643305959214.png"
							></image>
						</view>
						<!-- <view class="time f2 c3">这是最好的滑雪</view> -->
					</view>
					<block v-if="item.Status == 0">
						<view class="refuse" @click="auditItem(item.ID, item.UserID, item.AppointmentID, -1, index)">拒绝</view>
						<view class="agree" @click="auditItem(item.ID, item.UserID, item.AppointmentID, 1, index)">同意</view>
					</block>
					<block v-if="item.Status == 1">
						<view class="refuse" @click="closeUser(item.ID, item.UserID)">移除</view>
					</block>
					<view v-if="itme.Status == -1">已拒绝</view>
				</view>
				</block>
				<block v-else>
					<u-empty
						mode="applyList"
						width="64"
						height="64"
						icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17124806786111367.png"
						:show="true"
						iconSize="32"
						text="暂无报名人员"
					></u-empty>
				</block>
			</view>
		</x-scroll>
	</view>
</template>

<script>
export default {
	data() {
		return {
			ballID: 0,
			load: false,
			_freshing: true,
			newNum: 0,
			applyList: [],
			applylLength:0,
		};
	},
	onLoad(e) {
		this.init();
		this.ballID = e.id;
	},
	async onShow() {
		this.init();
		this.load = true;
	},
	methods: {
		onRefresh() {
			this.init();
		},
		async init() {
			let res = await this.$api.post('Appointment/Detail', {
				ID: this.ballID
			});

			if (res.data) {
				this.applyList = res.data.Item.filter((v) => v.IsMySelf == 0 && v.Status != -1).map((v) => {
					return v;
				});
				this.applylLength = this.applyList.length
				console.log(this.applyList,this.applylLength,'222');
			}
		},
		//同意或拒绝加入组局
		async auditItem(id, uID, appointmentId, status, index) {
			if (status == -1) {
				let _this = this;
				uni.showModal({
					title: '温馨提示',
					content: '确定要拒绝该人员吗？',
					confirmText: '拒绝',
					success: async function (rs) {
						if (rs.confirm) {
							console.log('++++____');
							console.log(rs.confirm);
							console.log(_this.$api);
							const value = await _this.$api.post('Appointment/AuditItem', {
								ID: id,
								AppointmentID: appointmentId,
								Status: status
							});
							if (!value.data) {
								_this.$pv.msg(value.message);
								return;
							}
							_this.init();
							_this.$pv.msg('已拒绝');
						} else if (rs.cancel) {
						}
					}
				});
			} else {
				const res = await this.$api.post('Appointment/AuditItem', {
					ID: id,
					AppointmentID: appointmentId,
					Status: status
				});
				if (!res.data) {
					this.$pv.msg(res.message);
					return;
				}
				this.init();
				uni.$emit('people_confirm', {});

				// 获取用户
				let user_cache = await this.$api.post('/user/GetUserInfo', {
					ID: uID
				});

				const groupID = uni.$prefix + appointmentId.toString();
				const userIDs = uni.$prefix + uID.toString();
				if (status == 1) {
					await this.$im.inviteUsersIntoGroup({ groupID, userIDs });
					const user = uni.getStorageSync('user');
					await this.$im.sendCustomMessage({
						conversationID: groupID,
						subType: 51, //直接加入群聊
						conversationType: 2,
						message: JSON.stringify({
							id: groupID,
							nickName: user_cache.data.Name,
							userID: user_cache.data.UserID,
							operatorNickName: user.Name,
							operatorUserID: user.UserID
						})
					});
				}

				this.$pv.msg('操作成功');
			}

			// if (this.applyList[index]) {
			// 	this.applyList[index].Status = status
			// 	this.applyList = [...this.applyList]
			// }
		},
		async closeUser(itemid, uID) {
			console.log('====================' + itemid);
			const userIDs = uID.toString() + '09';
			const groupID = this.ballID.toString();
			let _this = this;
			uni.showModal({
				title: '温馨提示',
				content: '确定要移除该人员吗？',
				confirmText: '移除',
				success: function (rs) {
					if (rs.confirm) {
						let res = _this.$api.post('Appointment/AuditItem', {
							ID: itemid,
							AppointmentID: _this.ballID,
							Status: -1
						});
						setTimeout(() => {
							_this.init();
						}, 200);
						_this.$im.kickGroupMembers([userIDs], groupID).then((res) => {
							console.log('移除成功', res);
						});
						_this.$pv.msg('您成功移除人员');

						_this.init();
					} else if (rs.cancel) {
					}
				}
			});

			console.log();
		}
	},
	computed: {
		getUserType(l) {
			return (l) => {
				if (l.indexOf('年') != -1) {
					return 1;
				} else if (l.indexOf('金') != -1) {
					return 2;
				} else if (l.indexOf('银') != -1) {
					return 3;
				} else {
					return 0;
				}
			};
		},
		getOolineTime(time) {
			return (time) => {
				console.log(time);
				let d = new Date(time).valueOf();
				return uni.$u.timeFrom(d);
			};
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f6f6f6;
}
.list {
	.item {
		display: flex;
		height: 140rpx;
		align-items: center;
		margin-bottom: 30rpx;
		.cover {
			height: 100rpx;
			width: 100rpx;
			border-radius: 50%;
			overflow: hidden;
			border: 1px solid #333;

			image {
				height: 100%;
				width: 100%;
			}
		}

		.con {
			padding-left: 20rpx;
			flex: 1;
			.vipiconimg {
				width: 120rpx;
				height: 40rpx;
				margin-left: 5rpx;
				vertical-align: middle;
			}
			.time {
				margin-top: 10rpx;
			}
		}
		.refuse {
			width: 132rpx;
			height: 56rpx;
			border-radius: 28rpx;
			border: 1rpx solid #e6e6e6;
			text-align: center;
			line-height: 56rpx;
			font-size: 28rpx;
			color: #333333;
			margin-left: 40rpx;
		}
		.agree {
			width: 132rpx;
			height: 56rpx;
			border-radius: 28rpx;
			background-color: #0d0d0d;
			text-align: center;
			line-height: 56rpx;
			font-size: 28rpx;
			color: #fff;
			margin-left: 38rpx;
		}
		.btn_sm {
			width: 112rpx;
			height: 48rpx;
			border-radius: 8rpx;
			line-height: 48rpx;
			text-align: center;
			background: #ffaa00;
			color: #fff;
		}

		.member {
			display: inline-block;
			vertical-align: middle;
			width: 68rpx;
			height: 32rpx;
			background: linear-gradient(135deg, #7e7e7e 0%, #292929 100%);
			border-radius: 2px;
			border: 2px solid #d6c6ab;
			text-align: center;
			color: #fff;
			font-size: 16rpx;
			line-height: 32rpx;
			margin-left: 20rpx;
		}

		.number_huan {
			color: #4c310c;
			background: linear-gradient(180deg, #fdf9f6 0%, #e1c4a6 100%);
			border: 2rpx solid #e6ceb5;
		}

		.number_yin {
			color: #4c310c;
			background: linear-gradient(180deg, #c9daf8 0%, #e1c4a6 100%);
			border: 2rpx solid #e6ceb5;
		}
	}

	.add {
		//  background: linear-gradient(90deg, #212121 0%, #313131 100%);
		.cover {
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				height: 70%;
				width: 70%;
			}
		}

		.nums {
			height: 45rpx;
			width: 45rpx;
			border-radius: 50%;
			background: #f00;
			color: #fff;
			text-align: center;
			line-height: 40rpx;
		}
	}
}
.name {
	color: #333;
}
</style>
